<template>
  <el-dialog title="酒店日期过滤" :close-on-click-modal="false" :visible.sync="visible">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="销售平台" prop="blonPlantform">
        <el-select
          v-model="dataForm.blonPlantform"
          clearable
          @change="pfChange"
          placeholder="请选择销售平台"
        >
          <el-option
            v-for="item in pfs"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺" prop="store">
        <el-select
          v-model="dataForm.store"
          clearable
          placeholder="请选择店铺"
        >
          <el-option
            v-for="item in stores"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="block">
        <span class="demonstration">多个日期</span>
        <el-date-picker
          type="dates"
          v-model="dates"
          value-format="yyyy-MM-dd"
          placeholder="选择一个或多个日期"
        >
        </el-date-picker>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="delDates()">清空日期</el-button>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="setDates()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dates1: [],
      dates: [],
      visible: false,
      dataForm: {
        dtId: null,
        blonPlantform: null,
        store: null,
      },
      pfs: [],
      stores: [],
      groups: [],
      dtList: [],
      dtListTreeProps: {
        label: "name",
        children: "children",
      },
      dataRule: {
        blonPlantform: [{ required: true, message: "请选择销售平台", trigger: "blur" }],
        store: [{ required: true, message: "请选择店铺", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 获取机构及销售平台下拉列表数据
    getQuryPf() {
      this.$http({
        url: this.$http.adornUrl("/op/taskstatus/pf"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.pfs = data.spfs;
        }
      });
    },
    // 查询店铺信息
    getStore() {
      this.$http({
        url: this.$http.adornUrl("/op/taskstatus/store"),
        method: "get",
        params: this.$http.adornParams({
          pf: this.dataForm.blonPlantform,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.stores = data.list;
        }
      });
    },
    // 查看日期
    getDates() {
      this.$http({
        url: this.$http.adornUrl("/op/date/get"),
        method: "get",
        params: this.$http.adornParams({
          storeId: this.dataForm.store,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dates1 = data.list;
        }
      });
    },
    // 删除日期
    delDates() {
      this.$http({
        url: this.$http.adornUrl("/op/date/del"),
        method: "post",
        data: this.$http.adornData({
          storeId: this.dataForm.store,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
        } else {
          this.$message.error(data.msg);
        }
        this.visible = false;
      });
    },
    // 选择销售平台
    pfChange(value) {
      this.getStore();
    },
    // 选择店铺
    // storeChange(value) {
    //   this.getDates();
    // },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.getQuryPf();
      });
    },
    // 设置日期
    setDates() {
      this.$http({
        url: this.$http.adornUrl("/op/date/set"),
        method: "post",
        data: this.$http.adornData({
          storeId: this.dataForm.store,
          dateList: this.dates,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
        } else {
          this.$message.error(data.msg);
        }
        this.dates = [];
        this.visible = false;
      });
    },
  },
};
</script>
